'use client'

import React, { useState } from 'react';
import { Input, Checkbox, Button, Divider } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import { adminMock, userMock } from '../mock';
import { useRouter } from "next/navigation";
import { useDispatch } from 'react-redux';
import { GET_ROLE_LIST } from '../redux/constants';


const Login: React.FC = () => {
  const [isFlipped, setIsFlipped] = useState(false);
  const [showLoginPassword, setShowLoginPassword] = useState(false);
  const [showRegisterPassword, setShowRegisterPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const router = useRouter();
  const dispatch = useDispatch();
  

  const handleLogin = (str: string) => {
    console.log(Math.random() > 5 ? 'admin' : 'user',str)
    if (Math.random() > 0.5) {
      dispatch({
        type: GET_ROLE_LIST,
        payload: {
          routesList: adminMock,
        }
      })
    } else {
      dispatch({
        type: GET_ROLE_LIST,
        payload: {
          routesList: userMock,
        }
      })
    }
    
    router.push('/wzs');
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="login-container w-[800px] h-[600px] bg-white rounded-lg shadow-lg overflow-hidden relative">
        <div className={`w-full h-full relative ${isFlipped ? 'flipped' : ''}`}>
          {/* Login Form */}
          <div className="login-form w-full h-full p-12">
            <div className="text-center mb-8">
              <h1 className="font-['Pacifico'] text-4xl text-primary mb-4">site-sculptor</h1>
              <h2 className="text-2xl font-bold text-gray-800 mb-2">欢迎回来</h2>
              <p className="text-gray-600">请登录您的账号</p>
            </div>

            <div className="space-y-6 max-w-sm mx-auto">
              <Input
                prefix={<UserOutlined className="text-gray-400" />}
                placeholder="请输入用户名"
                className="py-2 !rounded-button"
                defaultValue={'admin'}
                disabled
              />

              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="请输入密码"
                className="py-2 !rounded-button"
                iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
                defaultValue={'123'}
                disabled
              />

              <div className="flex items-center justify-between text-sm">
                <Checkbox className="text-gray-600">记住密码</Checkbox>
                <a href="#" className="text-primary hover:text-blue-600">忘记密码？</a>
              </div>

              <Button type="primary" block  onClick={() => handleLogin('login')}>
                登 录
              </Button>

              <div className="text-center">
                <Button type="link" onClick={() => setIsFlipped(true)} className="text-gray-600 hover:text-primary">
                  没有账号？点击注册
                </Button>
              </div>

              <Divider className="my-6">其他登录方式</Divider>

              <div className="flex justify-center space-x-6">
                <Button
                  shape="circle"
                  className="w-10 h-8 border border-gray-300 hover:border-primary hover:text-primary"
                >
                  <i className="fab fa-weixin"></i>
                </Button>
                <Button
                  shape="circle"
                  className="w-10 h-8 border border-gray-300 hover:border-primary hover:text-primary"
                >
                  <i className="fab fa-qq"></i>
                </Button>
                <Button
                  shape="circle"
                  className="w-10 h-8 border border-gray-300 hover:border-primary hover:text-primary"
                >
                  <i className="fab fa-weibo"></i>
                </Button>
              </div>
            </div>
          </div>

          {/* Register Form */}
          <div className="register-form w-full h-full p-12">
            <div className="text-center mb-8">
              <h1 className="font-['Pacifico'] text-4xl text-primary mb-4">site-sculptor</h1>
              <h2 className="text-2xl font-bold text-gray-800 mb-2">创建新账号</h2>
              <p className="text-gray-600">填写信息完成注册</p>
            </div>

            <div className="space-y-6 max-w-sm mx-auto">
              <Input
                prefix={<UserOutlined className="text-gray-400" />}
                placeholder="请设置用户名"
                className="py-2 !rounded-button"
              />

              <Input
                prefix={<MailOutlined className="text-gray-400" />}
                placeholder="请输入邮箱"
                className="py-2 !rounded-button"
              />

              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="请设置密码"
                className="py-2 !rounded-button"
                iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
              />

              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="请确认密码"
                className="py-2 !rounded-button"
                iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
              />

              <Button type="primary" block >
                注 册
              </Button>

              <div className="text-center">
                <Button type="link" onClick={() => setIsFlipped(false)} className="text-gray-600 hover:text-primary">
                  已有账号？直接登录
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>
        {`
          .login-container {
            perspective: 1000px;
          }
          .login-form {
            transition: transform 0.3s ease-in-out;
            transform-style: preserve-3d;
            position: relative;
            backface-visibility: hidden;
          }
          .register-form {
            transition: transform 0.3s ease-in-out;
            transform-style: preserve-3d;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform: rotateY(180deg);
          }
          .flipped .login-form {
            transform: rotateY(-180deg);
          }
          .flipped .register-form {
            transform: rotateY(0deg);
          }
        `}
      </style>
    </div>
  );
};

export default Login;

